<template>
	<div class="bg pause" :class="{c:showPause}"></div>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	let timeout = null;
	export default {
		name: 'Pause',
		props: {},
		data() {
			return {
				showPause: false,
			};
		},
		computed: {
			...mapState({
				pause: (state) => {
					let pause = state.pause;
					// console.log("pause", pause);
					return pause;
				}
			})
		},
		created() {

		},
		beforeMount() {

		},
		mounted() {
			this.setShake(this.pause);
		},
		beforeUnmount() {

		},
		watch: {
			pause(newVal) {
				this.setShake(newVal);
			}
		},
		methods: {
			setShake(bool) { // 根据props显示闪烁或停止闪烁
				console.log("setShake",bool)
				if (bool && !timeout) {
					timeout = setInterval(() => {
						this.showPause = !this.showPause;
					}, 250);
				}
				if (!bool && timeout) {
					clearInterval(timeout);
					this.showPause = false;
					timeout = null;
				}
			}

		},

	}
</script>

<style scoped lang="less">
	.pause {
		width: 20px;
		height: 18px;
		background-position: -100px -75px;
		position: absolute;
		top: 3px;
		left: 18px;

		&.c {
			background-position: -75px -75px;
		}
	}
</style>
